<link rel="stylesheet" href="{{ asset('css/webuploader.css') }}">
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">创建单页</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        {{ csrf_field() }}
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="pro-name">单页名称</label>
                <div class="col-sm-4">
                    <input type="text" name="pro_name" class="form-control" placeholder="单页名称" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="model">选择项目模板</label>
                <div class="col-sm-4">
                    <select name="model" id="" class="form-control">
                    @foreach($template as $id=>$v)
                        <option value="{{$id}}">{{$v}}</option>
                    @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="country">选择国家</label>
                <div class="col-sm-4">
                    <select name="country" id="country" class="form-control">
                    @foreach($country as $id=>$v)
                        @if($id == 'TH')
                        <option value="{{$id}}" selected="selected">{{$v}}</option>
                        @else
                        <option value="{{$id}}">{{$v}}</option>
                        @endif
                    @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="good_sku">商品sku</label>
                <div class="col-sm-4">
                    <input type="text" name="good_sku" id="good_sku" class="form-control"/>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-success" id="laqu">拉取商品信息</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="good">原商品</label>
                <div class="col-sm-8">
                    <input type="text" name="good" id='good' class="form-control" placeholder='原商品名称' readonly='readonly'>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="good_name">商品名称</label>
                <div class="col-sm-4">
                    <input type="text" name="good_name" class="form-control" placeholder="商品名称" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="image">商品图片</label>
                <div class="col-sm-8" id='original_img'>
                </div>
                <input type="hidden" name='original_img' id="_original_img">
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="uploader-demo">上传商品图片</label>
                <div class="col-sm-4">
                    <div id="uploader-demo">
                        <!--用来存放item-->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="raw_price">原价</label>
                <div class="col-sm-2">
                    <input type="text" name="raw_price" id='raw_price' value="" class="form-control" placeholder="原价"/>
                </div>
            </div>
            <!-- <div class="form-group">
                <label class="col-sm-2 control-label" for="current_price">现价</label>
                <div class="col-sm-2">
                    <input type="text" name="current_price" class="form-control" placeholder="现价" />
                </div>
            </div> -->
            <div class="form-group">
                <label class="col-sm-2 control-label" for="sale_num">已销售</label>
                <div class="col-sm-2">
                    <input type="text" name="sale_num" class="form-control" placeholder="已销售" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="amount">总件数</label>
                <div class="col-sm-2">
                    <input type="text" name="amount" class="form-control" placeholder="总件数" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="end_time">结束时间</label>
                <div class="col-sm-2">
                    <input type="text" name="end_time" class="form-control" placeholder="填写几小时后结束" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="url">单页地址</label>
                <div class="col-sm-8">
                    <input type="text" name="url" class="form-control" placeholder="保存后自动生成" readonly='readonly' />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="status">单页状态</label>
                <div class="col-sm-2">
                <select name="status"class="form-control">
                        <option value="1" selected="selected">可用</option>
                        <option value="0">废弃</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="detail">详情编辑</label>
                <div class="col-sm-8">
                    <div id="editor" style="position:relative;z-index:15">
                        
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="detail"></label>
                <div class="col-sm-1">
                    <button type="button" class="btn btn-success" id="baocun">保存详情编辑</button>
                </div>
            </div>
            <input type="hidden" name="editor" id="hd" value="">
        </div>
        @if($errors->any())
            <ul class="list-group">
                @foreach($errors->all() as $error)
                    <li class="list-group-item list-group-item-danger">{{ $error }}</li>
                @endforeach
            </ul>
        @endif
        <div class="box-footer">
            <button type="button" class="btn btn-primary" data-url="{{ url('admin/spa/store') }}" data-type="POST" onclick="subAction(this)">创 建</button>
            <button type="button" class="btn btn-primary" data-url="{{ url('admin/spa/lst') }}" onclick="jumpfun(this)">返 回</button>
        </div>
    </form>
</div>

<script type="text/javascript" src="{{ asset('wangeditor/wangEditor.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/webuploader.js') }}"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadImgServer = '/admin/spa/upload'
    editor.customConfig.uploadImgMaxLength = 3
    editor.create()

    $('#baocun').click(function(){
        alert('保存成功');
        $('#hd').val(editor.txt.html());
    })

    $('#laqu').click(function(){
        var country = $('#country').val();
        var sku = $('#good_sku').val();
        if(sku == ''){
            alert('请填写sku');
            return;
        }
        $.ajax({
            url : "{{ url('admin/spa/getgoodsdata') }}?country="+country+'&sku='+sku,
            type : "get",
            dataType : "json",
            data : '',
            success : function(data){
                $('#good').val(data.info.data.product_name);
                $('#raw_price').val(data.info.data.price);
                $('#original_img').empty();
                var imgs = data.info.data.images
                imgs.forEach(function(item){
                    $('#original_img').append('<img src='+item+' width="150">')
                    var original_img = $('#_original_img').val()
                    $('#_original_img').val(original_img+item+';')
                })
            },
            error : function(){}
        });
    })
</script>
<script>
var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf:  "{{asset('js/Uploader.swf')}}",

    // 文件接收服务端。
    server: "{{ url('admin/spa/upload') }}",

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#filePicker',

    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'jpg,jpeg,bmp,png,gif',
        mimeTypes: 'image/*'
    }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');


        // $list为容器jQuery实例
        var $list = $('#fileList');
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        var thumbnailWidth = 100;
        var thumbnailHeight =100;
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

    // 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }

    $percent.css( 'width', percentage * 100 + '%' );
});

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
</script>
